import React,{ useState } from 'react';

// 一个函数返回一段jsx
const App = () => {
  // let name = '杨幂'
  // state  状态
  // 当前组件添加一个状态  默认值
  // 解构
  // console.log(useState(1))
  // JSX {} 占位符， 简单用法 输出值
  // {} 内就是运行区域， 结果默认输出
  let [isSingle, serIsSingle] = useState(true); // 单身
  let [name, setName] = useState('杨幂'); // 给JSX带来状态 返回值为数组
  let [date, setDate] = useState(new Date().toLocaleTimeString());
  setInterval(() => {
    setDate(new Date().toLocaleTimeString())
  }, 1000)
  const changeName = () => {
    // console.log('lalal')
    setName('mike')
  }

  const friends = [{
    name: '杨幂',
    age: 18
  }, {
    name: '热巴',
    age: 18
  }];
  return (
    <div>
      {/* JSX 简单 高效的的UI模板  状态+时间+... */}
      <p>{isSingle?<span>单身</span>:<span>有主</span>}</p>
      <h1>hello {name}</h1>
      <h2>现在是{date}</h2>
      <ul>
        {
          friends.map((friends,index) => <li key={index}>{friends.name}- {friends.age}</li>)
        }
      </ul>
      <button onClick={changeName}>显示英文名</button>
    </div>
  )
}
export default App